<template>
    <div class="square">
        <div class="top">
            <div class="head">
                <Theme/>
                <ul class="headList">
                    <li class="headItem" v-for="(secHead,index) in secHead" :key="index">
                        <router-link :to="secHead.to" active-class="headerActive">{{secHead.name}}</router-link>
                    </li>
                </ul>
                <Search/>
            </div>
            <router-view></router-view>
        </div>
        <MyFoot/>
    </div>
</template>

<script>


import Theme from '../common/Theme.vue'
import Search from '../common/Search.vue'
import MyFoot from '../common/MyFoot.vue'

export default {
    name:'Square',
    components:{
        Theme,Search,MyFoot
    },
    data() {
        return {
            secHead:[
                {name:'美食',to:'/square/food'},
                {name:'娱乐',to:'/square/entertainment'},
                {name:'兼职',to:'/square/job'},
                {name:'交流圈子',to:'/square/chat'},
                {name:'活动专区',to:'/square/activity'},
                {name:'校园生活',to:'/square/friend'},
                {name:'跳蚤市场',to:'/square/market'},
            ]
        }
    },
}
</script>

<style lang="less" >
    .square{
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .head{
        background-color: var(--themeColor);
        display: flex;
        justify-content: space-between;
        // background-color: var(--themeColor);
        color: white;
        padding: 0.3rem 0.1rem;
        .headList{
            list-style: none;
            flex: 1;
            text-align: center;
            margin: 0rem 0.4rem;
            font-size: @fontSmall;
            overflow-x: auto;
            white-space: nowrap;
        }
        .headList::-webkit-scrollbar{
            display: none;
        }
    }
    
    .headItem{
        display: inline;
        a{
            color: white;
        }
    }
    .headItem:not(:last-child){
        margin-right: 1rem;
    }
    i{
        display: flex;
        align-items: center;
    }
    a{
        white-space: nowrap;
    }
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .block {
        width: 120px;
        height: 120px;
        background-color: #fff;
    }
    .headerActive{
        font-size: 0.5rem;
    }
</style>